<template>
<div width="100%">
     <el-card class="box-card"  >
      <div slot="header" class="clearfix">
        <span>财务管理</span>
      </div>
      <!--搜索-->
        <el-form
        :inline="true"
        :model="formsearch"
        class="demo-form-inline"
        style="padding-right: -17px; padding: 0px 20px"
      >
          <el-form-item label="编号">
          <el-input
            v-model="formsearch.costId"
            placeholder="请输入编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="费用类型">
          <el-input
            v-model="formsearch.costType"
            placeholder="请输入费用类型"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">查询</el-button>
          <el-button type="primary"  @click="reset()">重置</el-button>
        <el-button type="primary" icon="el-icon-plus"  @click="onSubmitAdd()">新增</el-button>
        </el-form-item>
      </el-form>
    <!--表格-->
      <el-table :data="IncomeCost">
        <el-table-column
          prop="costId"
          label="编号"
        
        ></el-table-column>
        <el-table-column
          prop="costName"
          label="费用名称"
        
        ></el-table-column>
        <el-table-column prop="costMoney" label="费用金额">
        </el-table-column>
        <el-table-column
          prop="costType"
          label="费用类型"
       
        ></el-table-column>
        <el-table-column
          prop="costExplain"
          label="费用说明··"
        
        ></el-table-column>
        <el-table-column
          prop="costCreateTime"
          label="费用产生说明"
         
        ></el-table-column>
        <el-table-column
          prop="project.projectName"
          label="项目产生说明"
     
        ></el-table-column>
        <el-table-column prop="inventory" label="操作" width="180">
          <template slot-scope="scope" >
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
             @click="updateemployee(scope.row.costId)"
              >修改</el-button
            >
            <el-button
              icon="el-icon-delete"
              size="mini"
              type="danger"
             @click=" deleteRow(scope.row.costId) "
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
        <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formsearch.currentPage"
          :page-sizes="[5, 10, 15]"
          :page-size="formsearch.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="formsearch.totals"
        >
        </el-pagination>
      </div>
     </el-card>
     <!-- 弹出修改页面框 -->
     <el-dialog
      title="财务管理"
      :visible.sync="upKapian"
      width="50%"
      style="text-align: center"
    >
      <el-form
        :inline="true"
        class="demo-form-inline"
        v-model="upIncomeCost"
      >
        <el-form-item label="费用名称" prop="costName">
          <el-input
            v-model="upIncomeCost.costName"
            placeholder="请输入费用名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="费用金额"
          prop="costMoney"
          style="padding-left: 20px"
        > <el-input
            v-model="upIncomeCost.costMoney"
            placeholder="请输入费用金额"
          ></el-input>
        </el-form-item>
        <el-form-item label="费用类型" prop="costType">
          <el-input
            v-model="upIncomeCost.costType"
            placeholder="请输入费用类型"
          ></el-input>
        </el-form-item>
             <el-form-item label="费用说明" prop="costExplain">
          <el-input
            v-model="upIncomeCost.costExplain"
            placeholder="请输入费用说明"
          ></el-input>
        </el-form-item>
        <el-form-item label="费用产生时间" prop="costCreateTime">
          <el-date-picker
            v-model="upIncomeCost.costCreateTime"
             align="left"
            type="date"
            placeholder="请输入费用产生时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="项目产生说明" prop="projectId">
           <el-select v-model="upIncomeCost.projectId"  placeholder="请选择项目" >
            <el-option
              v-for="d in Project"
              :key="d.projectId"
              :value="d.projectId"
              :label="d.projectName" 
            ></el-option>
          </el-select>
        </el-form-item>
        <br />
        <el-form-item>
          <el-button type="primary" @click="change()">修改员工</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 增加患者信息 -->
 <el-dialog
      title="财务管理"
      :visible.sync="addKapian"
      width="50%"
      style="text-align: center"
    >
      <el-form
        :inline="true"
        class="demo-form-inline"
        v-model="upIncomeCost"
      >
        <el-form-item label="费用名称" prop="costName">
          <el-input
            v-model="upIncomeCost.costName"
            placeholder="请输入费用名称"
               type="text"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="费用金额"
          prop="costMoney"
          style="padding-left: 20px"
        > <el-input
            v-model="upIncomeCost.costMoney"
            placeholder="请输入费用金额"
               type="text"
          ></el-input>
        </el-form-item>
        <el-form-item label="费用类型" prop="costType">
          <el-input
            v-model="upIncomeCost.costType"
            placeholder="请输入费用类型"
            type="text"
          ></el-input>
        </el-form-item>
             <el-form-item label="费用说明" prop="costExplain">
          <el-input
            v-model="upIncomeCost.costExplain"
            placeholder="请输入费用说明"
               type="text"
          ></el-input>
        </el-form-item>
        <el-form-item label="费用产生时间" prop="costCreateTime">
          <el-date-picker
            v-model="upIncomeCost.costCreateTime"
             align="left"
            type="date"
            placeholder="请输入费用产生时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="项目产生说明" prop="projectId">
           <el-select v-model="upIncomeCost.projectId"  placeholder="请选择项目" >
            <el-option
              v-for="d in Project"
              :key="d.projectId"
              :value="d.projectId"
              :label="d.projectName" 
            ></el-option>
          </el-select>
        </el-form-item>
        <br />
        <el-form-item>
          <el-button type="primary" @click="add()">新增员工</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
</div>
</template>

<script>
export default {
    data(){
        return{
          formsearch:{
            costId:'',
            costType:'',
            currentPage: 1,
            pageSize: 5,
              totals: 10,
          },
            IncomeCost:[],
            upIncomeCost:{
                costId:'',
                costName:'',
                costMoney:'',
                costType:'',
                costExplain:'',
                costCreateTime:'',
                projectName:''
            },
            Project:{},
            upKapian:false,
            addKapian:false,
        };
     
    },methods: {
    onSubmit() {
      this.$axios.post("/api/biz/incomeCost/list", this.formsearch).then((res) => {
          let data=res.data;
          if (data.code == 0) {
            this.IncomeCost = res.data.data.data;
                this.formsearch.totals = res.data.data.totals;
          }
        });
    },
    //重置
    reset(){
       (this.formsearch.costId = ""),
        (this.formsearch.costType = "")
            if(this.formsearch.costId == "" && this.formsearch.costType == ""){
                this.onSubmit();
            }
    },
      //设置每页多少条
    handleSizeChange(pageSize) {
      this.formsearch.pageSize = pageSize;
      this.onSubmit();
    },
    //下一页
    handleCurrentChange(currentPage) {
      this.formsearch.currentPage = currentPage;
      this.onSubmit();
    },
    //修改
    change(){
   this.$axios.post("/api/biz/incomeCost/update",this.upIncomeCost).then((res) => {
            let data=res.data;
            if(data.code==0){
                this.$message.success(data.msg);
            }else{
                this.$message.error(data.msg);
            }
            this.upKapian=false;
            this. onSubmit();
        });

    },
    
    //根据id查询
    updateemployee(id){
           this.upKapian=true;
          this.$axios.post("/api/biz/incomeCost/selId/"+id).then((res) => {
                this.upIncomeCost=res.data.data;
    });
    
  
    },
    //删除
    deleteRow(id){
             this.$confirm("此操作将永久删除 , 是否继续?", "提示", {}).then(() => {
          this.$axios.post("/api/biz/incomeCost/del/" + id).then((res) => {
            let data = res.data;
            if (data !== null) {
              this.$message.success(data.msg);
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      );
    },
    //添加
    onSubmitAdd(){
      this.upIncomeCost={},
      this.addKapian=true;
    },
      add(){
 this.$axios.post("/api/biz/incomeCost/insert", this.upIncomeCost).then((res) => {
         let data=res.data;
         if(data.code==0){
           this.$message.success(data.msg);
         }else{
           this.$message.error(data.msg);
         }
         this.onSubmit();
         });
      }
    },
        mounted(){
          //默认加载
               this.upKapian=false;
         this.$axios.post("/api/biz/incomeCost/list", this.formsearch).then((res) => {
          if (res.data != null) {
            this.IncomeCost = res.data.data.data;
          }
         });
         //加载下拉框
           this.$axios.post("/api/biz/incomeCost/selproject",this.Project).then((res) => {
                this.Project=res.data.data;
             
    });
        },
}
</script>

<style>
.box-card{
        /*设置内部填充为0，几个布局元素之间没有间距*/
        padding: 0px;
         /*外部间距也是如此设置*/
        margin: 0px;
        /*统一设置高度为100%*/
        width: 100%;

        height: 100%;
}
.buttonstyle{
    margin-right: 100%;
    
}
.box-card {
  width: auto;
  margin-top: 0;
}
</style>
